<html>

	<head>
		<meta charset="utf-8">
		<title>个人信息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/common.css" />	
		<link rel="stylesheet" href="css/common_article.css" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-scroll-wrapper,
			.mui-scroll {
				top: 15px;
				background-color: #efeff4;
			}
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			.mui-table-view:after {
				height: 0;
			}
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.update {
				font-style: normal;
				color: #999999;
				margin-right: -25px;
				font-size: 15px
			}
			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}
			.mui-bar{
				background-color: rgba(0,153,204,.9);
			}
			.mui-icon{
				color: #FFFFFF;
			}
		</style>
	</head>
	
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">消息通知</h1>
		</header>
		<div class="mui-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a>接收新消息通知提示<span class="mui-pull-right" id="tipMessage">已开启</span></a>
						</li>
					</ul>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							声音
							<div id="ring" class="mui-switch mui-switch-mini">
								<div class="mui-switch-handle"></div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							震动
							<div id="shock" class="mui-switch mui-switch-mini">
								<div class="mui-switch-handle"></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.zoom.js"></script>
	<script src="js/mui.previewimage.js"></script>
	<script type="text/javascript" src="js/md5.js" ></script>
	<script type="text/javascript" src="js/uuid.js" ></script>
	<script type="text/javascript" src="js/utils.js" ></script>
	<script>
		var ringStatus = false ,shockStatus = false ,ownerId = '' ,clientid = 0;
		mui.previewImage();
		 //初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		mui.plusReady(function() {
			
			defaultInfo() ;
			
			var clientInfo = plus.push.getClientInfo();
			clientid = clientInfo.clientid || '';
			if(!clientid || clientid == 'null'){
				clientInfo = xhz.getClientInfo() ;
				clientid = clientInfo.clientid || '' ;
			}
			
			
		});
		
		function changeStatus(){
			if(!ringStatus && !shockStatus){
		  		document.getElementById("tipMessage").innerHTML="已关闭" ;
		  	}else{
		  		document.getElementById("tipMessage").innerHTML="已开启" ;
		  	}
		}
		function defaultInfo() {
			var userInfo = xhz.getUser() ;
			ownerId = userInfo.id ;
			
			shockStatus = 'U' == userInfo.shock ? true : false ;
			var shockCss = shockStatus ? 'mui-switch mui-switch-mini mui-active' : 'mui-switch mui-switch-mini' ;
			ringStatus = 'U' == userInfo.ring ? true : false ;
			var ringCss = ringStatus ? 'mui-switch mui-switch-mini mui-active' : 'mui-switch mui-switch-mini' ;
			document.getElementById("shock").className = shockCss ;
			document.getElementById("ring").className = ringCss ;
			
			changeStatus();
		}
		
		document.getElementById("shock").addEventListener("toggle",function(event){
		  	shockStatus = event.detail.isActive ? true : false ;
		  	var status = shockStatus ? 'U' : 'D' ;
		  	console.debug('shockStatus is  ' + status) ;
		  	xhz.ajax(URL_PROFIL_SET,{shock:status,alias:ownerId,clientid:clientid},function(data){
		  		if(data.code == 1){
		  			changeStatus();
				  	xhz.setUser(data.data) ;
				  	return ;
		  		}
		  		mui.toast(data.message) ;
		  	}) ;
		})
		document.getElementById("ring").addEventListener("toggle",function(event){
		  	ringStatus = event.detail.isActive ? true : false ;
		  	var status = ringStatus ? 'U' : 'D' ;
		  	console.debug('ringStatus is  ' + status) ;
		  	xhz.ajax(URL_PROFIL_SET,{ring:status,alias:ownerId,clientid:clientid},function(data){
		  		if(data.code == 1){
		  			changeStatus() ;
				  	xhz.setUser(data.data) ;
				  	return ;
		  		}
		  		mui.toast(data.message) ;
		  	}) ;
		  	
		})
	</script>

</html>